<template>
  <div ref="radarChart" :style="{ width: '100%', height: '400px' }"></div>  <!-- 给定宽高 -->
</template>

<script setup lang="ts">
import {onMounted, type PropType, reactive, ref} from 'vue';
import * as echarts from 'echarts';
import { defineProps } from 'vue';
import type {SixPointProps} from "@/api/types/novel/detailMode";

const radarChart = ref<HTMLDivElement | null>(null);  // 定义 radarChart 类型


// 定义 props
const props = defineProps({
  masterId: Number,
  sixPointData: {
    type: Object as PropType<SixPointProps> | any, // 使用 PropType 来定义类型
    default: () => ({
      indicator: [],
      value: [],
      title: ''
    })
  }
});

const option = reactive({
  title: {
    left: 'center',  // 设置标题居中显示
    text: props.sixPointData.title,  // 设置标题文本
    top: 'top',  // 设置标题位置在底部
    textStyle: {
      color: 'black',  // 设置标题的文字颜色
      fontSize: 20,  // 设置标题字体的大小
      fontWeight: 'bold',  // 设置标题字体的粗细
    },
    padding: [30, 0, 30, 0]  // 设置标题与图表的上下间隔，单位为px
  },
  tooltip: {
    trigger: 'axis',
    textStyle: {
      color: '#FFA500'  // 设置提示框文字颜色为橙色
    }
  },
  radar: {
    // 设置雷达图的轴
    indicator: props.sixPointData.indicator,
    shape: 'polygon',  // 保持为正六边形
    radius: '60%',  // 缩小内圈大小，可以根据需要调整比例
    splitLine: {
      show: true,  // 保证有分割线
      lineStyle: {
        color: '#ccc'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#ccc',
      }
    },
    name: {
      textStyle: {
        color: '#FFA500',  // 设置雷达图轴文字为橙色
        fontSize: 18,  // 增加文字大小
        verticalAlign: 'middle'  // 设置垂直对齐方式
      }
    }
  },
  series: [
    {
      name: '雷达图',
      type: 'radar',
      data: [
        {
          value: props.sixPointData.values,
          name: '能力数据',
          areaStyle: {
            color: 'rgba(0, 204, 255, 0.2)'  // 设置填充颜色
          },
          lineStyle: {
            color: '#00ccff',  // 设置边框颜色
            type: 'solid'  // 使用实线连接数据点
          },
          symbol: 'rect',  // 将数据点设为矩形，模拟直角连接
          symbolSize: 0  // 设置矩形的大小
        }
      ]
    }
  ]
});



onMounted(() => {

  // 确保 radarChart.value 不为空
  if (radarChart.value) {
    const myChart = echarts.init(radarChart.value);

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
  }
});
</script>

<style scoped>
/* 可以根据需要调整图表的样式 */
</style>
